<template>
	<view class="content">
		<!-- 搜索框 -->
		<view class="u-search">
			<view class="search">
				<u-search :showAction="true" v-model="text" :animation="true" searchIconColor="#000" color="#c8c9cc" searchIconSize="20" bgColor="#f7f8fa"></u-search>
			</view>
		</view>
		<!-- 轮播图 -->
		<view class="banner">
			<swiper class="swiper" :circular="true" :indicator-dots="true" :autoplay="true" :interval="3000">
				<swiper-item v-for="(item, index) in banner" :key="item.id" class="swiper-item"><image :src="item.image_url" mode="widthFix"></image></swiper-item>
			</swiper>
		</view>
		<!-- 频道 -->
		<view class="channel">
			<u-grid :border="true" @click="click" col="5">
				<u-grid-item v-for="(baseListItem, baseListIndex) in channel" :key="baseListIndex">
					<u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="baseListItem.icon_url" :size="22"></u-icon>
					<text class="grid-text">{{ baseListItem.name }}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<!-- 品牌直供 -->
		<view class="brandList">
			<view class="brandList-title">品牌制造商直供</view>
			<view class="cd-brandList-content">
				<view class="cd-brandList-item" v-for="item in brandList" :key="item.id">
					<view class="cd-brandList-item-text">{{ item.name }}</view>
					<view class="cd-brandList-item-money">{{ item.floor_price | PriceFormats }}</view>
					<image :src="item.pic_url" mode="widthFix" class="cd-brandList-item-img"></image>
				</view>
			</view>
		</view>
		<!-- 新品发布 -->
		<view class="cd-newgoods-area">
			<view class="cd-big-title">周一周四·新品首发</view>
			<!-- 封住的组件 -->
			<goodList :goodsList="newGoodsList"></goodList>
		</view>
		<!-- 人气推荐 -->
		<view class="cd-hotGoodsList">
			<view class="cd-hotGoodsList-title">人气推荐</view>

			<view class="cd-hotGoodsList-item" v-for="item in hotGoodsList" :key="item.id">
				<view class="cd-hotGoodsList-img-box"><image :src="item.list_pic_url" mode="widthFix" class="cd-hotGoodsList-img"></image></view>
				<view class="cd-hotGoodsList-text-box">
					<view class="cd-hotGoodsList-textone">{{ item.name }}</view>
					<view class="cd-hotGoodsList-texttwo">{{ item.goods_brief }}</view>
					<view class="cd-hotGoodsList-moneny">{{ item.retail_price }}</view>
				</view>
			</view>
		</view>
		<!-- 专题 -->

		<view class="cd-topicList-area">
			<view class="cd-topicList-title">专题精选</view>
			<u-scroll-list :indicator="false">
				<view class="cd-topicList-content">
					<view class="cd-topicList-item" v-for="item in topicList" :key="item.id">
						<view class="cd-topicList-item-img-box"><image :src="item.scene_pic_url" mode="aspectFill" class="cd-topicList-img"></image></view>
						<view class="cd-topicList-item-box">
							<view class="cd-topicList-item-title">{{ item.title }}</view>
							<view class="cd-topicList-item-moneny">{{ item.price_info | PriceFormats }}</view>
						</view>
						<view class="cd-topicList-item-text">{{ item.subtitle }}</view>
					</view>
				</view>
			</u-scroll-list>
		</view>
		<!-- 模块封装调用 -->
		<view class="cd-categoryList">
			<view class="cd-categoryList-item" v-for="item in categoryList" :key="item.id">
				<view class="cd-categoryList-title">{{ item.name }}</view>
				<goodList :goodsList="item.goodsList"></goodList>
			</view>
		</view>
		<customtabBar></customtabBar>
	</view>
</template>

<script>
import customtabBar from '@/custom-tab-bar/custom-tab-bar.vue';

import { ApigetHomeData } from '../../util/api.js';
import goodList from '../../components/cd-categoryList/cd-categoryList.vue';
export default {
	data() {
		return {
			title: 'Hello',
			// 轮播图
			banner: [],
			channel: [],
			brandList: [],
			newGoodsList: [],
			hotGoodsList: [],
			topicList: [],
			categoryList: []
		};
	},
	components: {
		customtabBar,
		goodList
	},
	onShow() {
		this.$store.commit('changeIndex', 0);
	},
	async onLoad() {
		let res = await ApigetHomeData();
		console.log(res.data);
		this.banner = res.data.banner; //轮播图
		this.channel = res.data.channel; //频道
		this.brandList = res.data.brandList; //直供
		this.newGoodsList = res.data.newGoodsList; //新品首发
		this.hotGoodsList = res.data.hotGoodsList; //人气推荐
		this.topicList = res.data.topicList; //专题
		this.categoryList = res.data.categoryList; // 分类
	},
	methods: {}
};
</script>

<style scoped lang="less">
.content {
	background-color: #efefef;
	// padding-bottom: 100rpx;
	// 搜索栏
	.u-search {
		background-color: #fff;
		.search {
			padding: 20rpx 30rpx;
		}
	}
	.banner {
		width: 750rpx;
		height: 400rpx;
		.swiper {
			// width: 750rpx;
			height: 100%;
			height: 400rpx;
			.swiper-item {
				// width: 750rpx;
				width: 100%;
				height: 400rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	// 频道
	.channel {
		background-color: #fff;
		.u-grid {
			.u-border-right {
				border-right: 1px solid #f7f8f9;
				height: 140rpx;
			}
		}
		.u-grid-item {
			.grid-text {
				font-size: 24rpx;
				margin-top: 23rpx;
			}
		}
	}
	.brandList-title {
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 40rpx;
	}
	// 直供
	.brandList {
		background-color: #fff;
		margin-top: 40rpx;
		.cd-brandList-content {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-template-rows: 236rpx 236rpx;
			gap: 15rpx;

			.cd-brandList-item {
				position: relative;
				.cd-brandList-item-text {
					position: absolute;
					left: 24rpx;
					top: 24rpx;
					z-index: 1;
					font-size: 25rpx;
				}
				.cd-brandList-item-money {
					position: absolute;
					left: 24rpx;
					top: 80rpx;
					z-index: 1;
					font-size: 24rpx;
					color: #8b0000;
				}
				.cd-brandList-item-img {
					width: 100%;
				}
			}
		}
	}
	// 新品
	.cd-newgoods-area {
		background-color: #fff;
		.cd-big-title {
			height: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 40rpx;
			margin-top: 40rpx;
		}
	}

	.cd-hotGoodsList {
		background-color: #fff;
		margin-top: 20rpx;
		.cd-hotGoodsList-title {
			height: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 40rpx;
		}
		.cd-hotGoodsList-item {
			height: 210rpx;
			background-color: #fafafa;
			margin-bottom: 17rpx;
			display: flex;
			.cd-hotGoodsList-img-box {
				max-width: 228rpx;
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				.cd-hotGoodsList-img {
					width: 100%;
				}
			}

			.cd-hotGoodsList-text-box {
				flex: 1;
				.cd-hotGoodsList-textone {
					margin-top: 29rpx;
					font-size: 35rpx;
					height: 35rpx;
				}
				.cd-hotGoodsList-texttwo {
					margin-top: 43rpx;
					font-size: 24rpx;
					height: 24rpx;
				}
				.cd-hotGoodsList-moneny {
					margin-top: 40rpx;
					font-size: 20rpx;
					color: #8b0000;
					height: 20rpx;
				}
			}
		}
	}

	//
	.cd-topicList-area {
		background-color: #fff;
		.cd-topicList-title {
			height: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 40rpx;
		}
		.cd-topicList-content {
			display: flex;
			.cd-topicList-item {
				padding-left: 15rpx;
				height: 530rpx;
				margin-right: 15rpx;
				.cd-topicList-item-img-box {
					width: 600rpx;
					height: 400rpx;
					.cd-topicList-img {
						display: block;
						width: 100%;
						height: 100%;
					}
				}
				.cd-topicList-item-box {
					display: flex;
					.cd-topicList-item-title {
						margin-top: 26rpx;
						font-size: 32rpx;
					}
					.cd-topicList-item-moneny {
						margin-top: 26rpx;
						color: #8b0000;
						font-size: 32rpx;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
						margin-left: 18rpx;
						width: 120rpx;
					}
				}

				.cd-topicList-item-text {
					margin-top: 24rpx;
					font-size: 28rpx;
				}
			}
		}
	}
	.cd-categoryList {
		background-color: #fff;
		.cd-categoryList-title {
			height: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 40rpx;
		}
	}
}
</style>
